<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 侦听器
    侦听某个值的变化 ，可以理解 成change事件
    用法：watch:{
          值（该值不带this,用引号引着）(newVal,oldVal){
              newVal:当前值，
              oldVal:上一刻的值
          }
         }
   注意点：侦听的值要能通过this直接访问到的值 
    -->
    <div id='app'>
        <input type="text" name="" id="" v-model="inputValue">
    </div>
    <script src='./vue.js'></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                inputValue: ''
            },
            watch: {
                inputValue(newVal, oldVal) {
                    console.log('newVal:', newVal);
                    console.log('oldVal:', oldVal);

                }
            },
        })
    </script>
</body>

</html>